<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        #app{
            padding: 50px;
        }
        .content{
            font-size: 14px;
            margin: 30px 0;
        }
        .content img{
            width: 100px;
        }
        .tab{
            overflow: hidden;
        }
        .tab li{
            float: left;
            font-size: 12px;
            color: gray;
            margin-left: 20px;
        }
        .list li{
            list-style: none;
            border-bottom: 1px solid gainsboro;
            padding: 20px 0;
            position: relative;
        }
        .loginname{
            font-weight: bold;
            margin: 0 10px;
        }
        .bg{
            font-size: 12px;
            margin-top: 5px;
        }
        .text{
            padding-left: 30px;
            margin-top: 10px;
        }
        .text img{
            width: 120px;
        }
        .like{
            position: absolute;
            right: 0;
            top: 30%;
            color: #d81e06;
        }
        .like img{
            width: 18px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="title">
            <h3>{{arr.title}}</h3>
            <ul class="tab">
                <li>分类:{{arr.tab | classification}}</li>
                <li>{{arr.visit_count}}次访问</li>
                <li>发布时间{{arr.create_at | time}}</li>
                <li>作者:{{arr.author.loginname}}</li>
            </ul>
        </div>
        <div class="content" v-html="arr.content"></div>
        <ul class="list">
            <li v-for="(item,index) in arr.replies">
                <img src="" alt="头像图片"><span class="loginname">{{item.author.loginname}}</span> 
                <span class="bg">{{index+1}}楼</span>
                <div class="text" v-html="item.content"></div>
                <div class="like"><img src="image/爱心.png" alt="">{{item.ups.length}}</div>
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
     let vm = new Vue({
        el:"#app",
        data:{
            arr:[],

        },
        mounted(){
            axios.get("https://cnodejs.org/api/v1/topic/5ae140407b0e8dc508cca7cc",).then(res=>{
                console.log(res.data.data);
                this.arr = res.data.data
            }).catch(err=>{
                console.log(err);
            })
        },
        filters:{
            time(val){
                // console.log(val.replace(/T/g,'').replace(/\.[\d]{3}Z/,''));
                return val.replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')
            },
            classification(val){
                if(val=='ask'){
                    return "问答"
                }else if(val=='share'){
                    return "分享"
                }else if(val=="job"){
                    return "招聘"
                }else if(val=='good'){
                    return "精华"
                }
            }
        }

    })
</script>
</html>